<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <!--<div style="width: 1000px;margin-top: 20px;" id="formcontentMyhtml" ref="formcontentMyhtml">-->
      <!--<div class="myhtml" v-html="formContentHtml" ref="formContentHtml"></div>-->
      <!--</div>-->
      <el-form
        label-width="130px"
        :model="opinionForm"
        style="padding-right: 30px;"
        :rules="hasOpinionFlag?opinionRules:notOpinionRules"
        ref="opinionForm"
      >
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="意见类型 :" prop="hasOpinion">
              <!-- <el-radio v-model="opinionForm.hasOpinion" label="0">无意见</el-radio> -->
              <el-radio v-model="opinionForm.hasOpinion" label="1">修改意见</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="意见 :" prop="opinion">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入意见"
                v-model="opinionForm.opinion"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="联系人 :" prop="contactName">
              <el-input
                v-model="opinionForm.contactName"
                placeholder="请输入联系人"
                style="width: 280px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="联系电话 :" prop="contactNumber">
              <el-input
                v-model="opinionForm.contactNumber"
                placeholder="请输入联系电话"
                style="width: 280px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-group-file" style="margin-top:12px;" v-if="toDoOrnot=='0'">
        <span class="form-label-file">相关材料:</span>
        <el-upload
          class="upload-demo"
          action="string"
          :http-request="fileUploadRequest"
          :on-preview="fileHandlePreview"
          :on-remove="fileHandleRemove"
          :file-list="fileTypeIds['相关材料']"
          :auto-upload="true">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div style="margin-top: 18px;margin-left: 82px;" v-if="toDoOrnot=='1'">
        <p class="" style="float:left;font-weight: 600;margin-bottom: 0px;">附件 ：</p>
        <div v-for="(file,index) in files" :key="index" class="relateddiv">
          <el-tooltip class="item" effect="dark" content="下载资料" placement="top-start">
            <el-button class="downbtn" @click="fileDownload(file.fileId,file.fileName)">
              <img src="img/download-blue.png" class="detail-data-img"/><span>下载</span>
            </el-button>
          </el-tooltip>
          <p class="detail-data-file" v-if="file.fileName">{{file.fileName}}</p>
        </div>
        <p class="detail-data-file" v-if="files.length==0">无</p>
      </div>
      <div class="form-submit" v-if="toDoOrnot=='0'">
        <el-button type="primary" @click.stop="updateForm()">提交</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <div class="form-submit" style="margin-top: 30px;" v-if="toDoOrnot=='1'&&state=='4'">
        <!--<el-button type="success" @click.stop="agreeFeedback()">采 纳</el-button>-->
        <!--<el-button type="primary" @click.stop="disagreeFeedback()">不采纳</el-button>-->
        <el-button type="info" @click.stop="rejectFeedback()">退回修改</el-button>
      </div>
      <el-collapse v-model="activeNames" style="margin-top:2rem;">
        <el-collapse-item name="2" v-if="typeControlDetail=='1'">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">分配方案</div>
            </div>
          </template>
          <div class="card-body">
            <avue-crud :data="subjectListData"
                       :option="tableoption"
                       :page="page"
                       :table-loading="tableLoading"
                       @on-load="getResultList"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       class="avuecrud">
              <template slot-scope="scope" slot="menu">
                <div class="menu-title" @click.stop="planFeedback(scope.row,scope.index)">
                  <i class="iconfont iconview icon-primary"></i>
                  <p class="menu-title-text">查看反馈</p>
                </div>
                <div class="menu-title" @click.stop="subjectOpinionDelete(scope.row,scope.index)">
                  <i class="iconfont iconalter icon-warning"></i>
                  <p class="menu-title-text">删除</p>
                </div>
              </template>
            </avue-crud>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">意见征求信息</div>
            </div>
          </template>
          <!--<div style="float: right;-->
          <!--height: 60px;-->
          <!--margin-top: 50px;-->
          <!--margin-right: 20px;" v-if="btnName">-->
          <!--<el-button type="success" size="mini" @click.stop="getDetail()">{{btnName}}</el-button>-->
          <!--</div>-->
          <!--<div class="form-group" v-if="title">-->
          <!--<span class="form-label">规划名称:</span>-->
          <!--<span>{{title}}</span>-->
          <!--</div>-->
          <div class="searchDetail" style="margin-left: 9px;margin-top: -38px;">
            <bostech-detail :detail-data="opinionDetailData"></bostech-detail>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-dialog title="不采纳理由" :visible.sync="dialogVisibleDisagree">
        <el-input
          type="textarea"
          v-model="disagreeOpinion"
          rows="3"
        >
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleDisagree = false">取 消</el-button>
          <el-button type="primary" @click="disagreeComitYes()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="退回理由" :visible.sync="dialogVisibleReject">
        <el-input
          type="textarea"
          v-model="rejectReason"
          rows="3"
        >
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleReject = false">取 消</el-button>
          <el-button type="primary" @click="rejectComitYes()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="规划详情" :visible.sync="detailDialogVisible" width="70%">
        <bostech-detail :detail-data="detailData"></bostech-detail>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.stop="detailDialogVisible == false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {
    opinionFeedback,
    getOpinion,
    opinionTagert,
    disagreeOpinion,
    rejectOpinion,
    agreeOpinion,
    makeTxtFormOpinion,
    reviewDiscussFormOpinion,
    collectionFormOpinion,
    planFormOpinion,
    uploadFormOpinion
  } from "@/api/opinion";
  import getOpinionDetail from "@/mixins/opinion/getOpinionDetail";
  import fileTypeMixin from "@/mixins/fileTypeMixin";
  import {getFileTypeFiles, getNotNull} from '@/views/util'
  import {typeMap, btnNameMap, stateUrlMap} from "@/views/opinion/const"
  import getResultDetailData from "@/mixins/planning/getResultDetailData";
  import {getPlanSubjectList} from "@/api/subject";

  export default {
    name: "opinionFeedback",
    mixins: [fileTypeMixin, getOpinionDetail(), getResultDetailData()],
    created() {
      this.getTargetFormContent();
      this.getDetailData_opinion(this.$route.params.id);
      this.toDoOrnot = this.$route.query.toDoOrnot;
      this.state = this.$route.query.state;
      this.btnName = btnNameMap[this.$route.query.type];
      this.title = this.$route.query.title;
      this.typeControlDetail = this.$route.query.typeControlDetail;
      if (this.$route.query.type == '1') {
        this.getResultList()
      }
    },
    data() {
      return {
        headerData: {
          title: '意见征求反馈'
        },
        typeControlDetail: '',
        fileType: '相关材料',
        // 当前的表单信息
        formContentHtml: '',
        detailData: [],
        activeNames: ['1', '2'],
        toDoOrnot: '0',
        state: '',
        files: [],
        dialogVisibleDisagree: false,//不采纳理由弹框
        disagreeOpinion: '',// 不采纳理由
        dialogVisibleReject: false,// 退回理由弹框
        rejectReason: '',//退回理由
        title: '',//对应类型名称
        btnName: '',
        detailDialogVisible: false,
        assignDeptDetailData: [],
        opinionForm: {
          hasOpinion: '1'
        },
        hasOpinionFlag: true,
        opinionRules:{
          opinion: [
            {required: true, message: "请输入意见", trigger: "blur"}
          ],
          contactName: [
            {required: true, message: "请输入联系人", trigger: "blur"}
          ],
          contactNumber: [
            {required: true, message: "请输入联系电话", trigger: "blur"}
          ],
        },
        notOpinionRules:{
          opinion: [
            {required: false}
          ],
          contactName: [
            {required: true, message: "请输入联系人", trigger: "blur"}
          ],
          contactNumber: [
            {required: true, message: "请输入联系电话", trigger: "blur"}
          ],
        },
        subjectListData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        tableoption: {
          page: true,
          menuWidth: 220,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          menu: false,
          column: [
            {
              label: "课题名称",
              width: 250,
              prop: "title",
              cell: true
            },
            {
              label: "课题概述",
              width: 330,
              prop: "description",
              cell: true
            },
            {
              label: "拟牵头单位",
              prop: "deptName",
              cell: true,
            },
            {
              label: "拟配合单位",
              prop: "supportDeptName",
              cell: true,
            },
          ]
        },
      }
    },
    watch: {
      'opinionForm.hasOpinion'(val) {
         if(val == '0'){
           this.hasOpinionFlag = false
         }
         if(val == '1'){
           this.hasOpinionFlag = true
         }
      }
    },
    methods: {
      // 获取表单信息
      getTargetFormContent() {
        opinionTagert(this.$route.query.targetId).then(async response => {
          this.formContentHtml = response.data.data.formContent;
          this.files = await getFileTypeFiles(response.data.data.fileIds)
        })
      },
      goBack() {
        this.$router.go(-1);
      },
      // 更新表单信息
      updateForm() {
        if (stateUrlMap[this.$route.query.type] && stateUrlMap[this.$route.query.type].updateForm instanceof Function) {
          stateUrlMap[this.$route.query.type].updateForm(this)
        }
      },
      // 规划编制 表单提交
      makeTxtUpdateForm(){
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.opinionForm.hasOpinion = parseInt(this.opinionForm.hasOpinion);
              this.opinionForm.targetId = this.$route.query.targetId;
              this.opinionForm.fileIds = fileIds;
              makeTxtFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      // 审批发布 表单提交
      reviewDiscussForm(){
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.opinionForm.hasOpinion = parseInt(this.opinionForm.hasOpinion);
              this.opinionForm.targetId = this.$route.query.targetId;
              this.opinionForm.fileIds = fileIds;
              reviewDiscussFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      // 课题征集 表单提交
      collectionForm(){
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.opinionForm.hasOpinion = parseInt(this.opinionForm.hasOpinion);
              this.opinionForm.targetId = this.$route.query.targetId;
              this.opinionForm.fileIds = fileIds;
              collectionFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      // 课题计划 表单提交
      planForm(){
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.opinionForm.hasOpinion = parseInt(this.opinionForm.hasOpinion);
              this.opinionForm.targetId = this.$route.query.targetId;
              this.opinionForm.fileIds = fileIds;
              planFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      // 课题成果 表单提交
      uploadForm(){
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.opinionForm.hasOpinion = parseInt(this.opinionForm.hasOpinion);
              this.opinionForm.targetId = this.$route.query.targetId;
              this.opinionForm.fileIds = fileIds;
              uploadFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      // 采纳
      agreeFeedback() {
        this.$confirm("确定采纳?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          agreeOpinion(this.$route.query.targetId).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: '成功',
                message: '采纳成功',
                type: 'success',
                duration: 2000
              });
              this.$router.go(-1);
            }
          })
        })
      },
      // 不采纳弹框
      disagreeFeedback() {
        this.dialogVisibleDisagree = true
      },
      // 不采纳
      disagreeComitYes() {
        if (!this.disagreeOpinion) {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请填写不采纳理由!",
            duration: 2000
          });
          return
        }
        this.$confirm("确定不采纳?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          disagreeOpinion(Object.assign({
            targetId: this.$route.query.targetId,
            opinion: this.disagreeOpinion,
          })).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: '成功',
                message: '提交成功',
                type: 'success',
                duration: 2000
              });
              this.dialogVisibleDisagree = false;
              this.$router.go(-1);
            }
          })
        })
      },
      // 退回修改弹框
      rejectFeedback() {
        this.dialogVisibleReject = true
      },
      // 退回修改
      rejectComitYes() {
        if (!this.rejectReason) {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请填写退回理由!",
            duration: 2000
          });
          return
        }
        this.$confirm("确定退回?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          rejectOpinion(Object.assign({
            targetId: this.$route.query.targetId,
            opinion: this.rejectReason,
          })).then(response => {
            if (response.data.code == 0) {
              this.$notify({
                title: '成功',
                message: '提交成功',
                type: 'success',
                duration: 2000
              });
              this.dialogVisibleReject = false;
              this.$router.go(-1);
            }
          })
        })
      },
      getDetail() {
        if (stateUrlMap[this.$route.query.type] && stateUrlMap[this.$route.query.type].getDetail instanceof Function) {
          stateUrlMap[this.$route.query.type].getDetail(this, this.$route.query.relateId)
        }
      },
      getMyhtml() {
        $(this.$refs.formContentHtml).find('input').each(function () {
          this.setAttribute('value', this.value);
        });
        return $(this.$refs.formContentHtml).html()
      },
      currentChange(currentPage) {
        var page = this.page;
        page.currentPage = currentPage;
        this.getResultListPage(page);
      },
      sizeChange(pageSize) {
        var page = this.page;
        page.pageSize = pageSize;
        this.getResultListPage(page);
      },
      getResultListPage(page) {
        getPlanSubjectList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          planId:this.$route.query.relateId,
        })).then(response=>{
          this.subjectListData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      getResultList() {
        getPlanSubjectList(Object.assign({
          current: 1,
          size: 10,
          planId:this.$route.query.relateId,
        })).then(response=>{
          this.subjectListData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .myhtml {
    /deep/ table.gridtable {
      width: 100%;
      font-family: verdana, arial, sans-serif;
      font-size: 16px;
      color: #333333;
      border-width: 1px;
      border-color: grey;
      border-collapse: collapse;
      margin-left: 15px;
    }

    /deep/ table.gridtable th {
      border-width: 1px;
      width: 20%;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
    }
    /deep/ table.gridtable td {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #ffffff;
    }
  }
</style>


